<template>
    <div class="beton_config">
        <div v-if="config.nameId">
            <div class="btn">
                <el-button size="mini" class="bottom_all" @click="handleSave">保 存</el-button>
            </div>
            <div>
                <div class="item">28d抗压强度：<span :class="kyqd28.hgbz ? 'color':''" @click="setStandard('kyqd28')">{{kyqd28.hgbz || '待配置'}}</span></div>
                <div class="item">60d抗压强度：<span :class="kyqd60.hgbz ? 'color':''" @click="setStandard('kyqd60')">{{kyqd60.hgbz || '待配置'}}</span></div>
            </div>

            <SetStandardDialog :visible.sync="setStandardVisible" :config="setStandardConfig" @updated="setData" />
        </div>
    </div>
</template>
<script>
import SetStandardDialog from './SetStandardDialog.vue'
import { saveOrUpdate1, getQualityDetection1 } from '@/api/qualityTemplate'
export default {
    components: {
        SetStandardDialog,
    },
    props: {
        config: {
            type: Object,
            default: ()=>{}
        }
    },
    data() {
        return {
            setStandardVisible: false,
            setStandardConfig: {},
            kyqd28: {},
            kyqd60: {},
        }
    },
    watch: {
        config: {
            deep: true,
            handler: function() {
                console.log(1);
                this.getData();
            }
        }
    },
    methods: {
        getData() { // 获取数据
            const params = {
                type: 2,
                companyId: this.config.companyId,
                nameId: this.config.nameId
            }
            getQualityDetection1(params).then(res=>{
                if(res && res.code === 1001 && res.data) {
                    const myData = JSON.parse(res.data.tableSetting).myData;
                    this.kyqd28 = myData.kyqd28
                    this.kyqd60 = myData.kyqd60
                } else {
                    this.kyqd28 = {}
                    this.kyqd60 = {}
                }
            })
        },
        handleSave() { // 保存
            if(!this.kyqd28.hgbz || !this.kyqd60.hgbz) {
                return this.$message.info("请完整录入数据");
            }
            const params = {
                type: 2,
                companyId: this.config.companyId,
                nameId: this.config.nameId,
                tableSetting: JSON.stringify(
                    {
                        '28d': {
                            title: '28d抗压强度',
                            condition: [
                                {code: 1, iteam: '合格标准', min: this.kyqd28.hgbz[0], max: this.kyqd28.hgbz[1], format: 1},
                                {code: 3, iteam: '异常标准1', min: this.kyqd28.ycbz[0], max: this.kyqd28.ycbz[1], format: 2},
                                {code: 4, iteam: '异常标准2', min: this.kyqd28.ycbz2[0], max: this.kyqd28.ycbz2[1], format: 2}
                            ]
                        },
                        '60d': {
                        title: '60d抗压强度',
                        condition: [
                                {code: 1, iteam: '合格标准', min: this.kyqd60.hgbz[0], max: this.kyqd60.hgbz[1], format: 1},
                                {code: 3, iteam: '异常标准1', min: this.kyqd60.ycbz[0], max: this.kyqd60.ycbz[1], format: 2},
                                {code: 4, iteam: '异常标准2', min: this.kyqd60.ycbz2[0], max: this.kyqd60.ycbz2[1], format: 2}
                            ]
                        },
                        myData: {
                            kyqd28: this.kyqd28,
                            kyqd60: this.kyqd60,
                        }
                    }
                )
            }
            saveOrUpdate1(params).then(res=>{
                if(res && res.code === 1001) {
                    this.$message.success("保存成功");
                }
            })
        },
        // 设置标准
        setStandard(key) {
            this.setStandardVisible = true;
            this.setStandardConfig = {key, data: this[key]}
        },
        // 回调设置数据
        setData(data) {
            this[data.key] = data.data;
        },
    }
}
</script>
<style lang="scss" scoped>
.beton_config {
    padding: 20px;
    
    .btn {
        margin-bottom: 40px;
        padding-right: 100px;
        display: flex;
        flex-direction: row-reverse;
    }

    .item {
        margin-left: 400px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        span {
            width: 200px;
            height: 32px;
            display: inline-block;
            border: 1px solid #ccc;
            display: flex;
            align-items: center;
            padding: 0 10px;
            border-radius: 4px;
            color: #ccc;
        }
        .color {
            color: #000;
        }
    }
}
</style>


